<template>
    <div class="app-container">
        <!-- 搜索框 -->
        <el-form :model="roleSearch" ref="queryForm" size="small" :inline="true" style="margin-left: 2px;">
            <el-form-item label="角色名称">
                <el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" clearable v-model="roleSearch.roleName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getRoleListSearch()">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetSearch()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="roleList" style="width: 100%">
            <el-table-column type="index" :index="1" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" align="center">
            </el-table-column>
            <el-table-column prop="roleSort" label="角色排序" align="center">
            </el-table-column>
            <el-table-column prop="roleKey" label="编码" align="center">
            </el-table-column>
            <el-table-column prop="status" label="角色状态" align="center" width="80">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '0'" type="success">正常</el-tag>
                    <el-tag v-else type="danger">冻结</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" plain icon="el-icon-edit"
                        @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" plain icon="el-icon-delete" slot="reference"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改角色" :visible.sync="dialogFormVisible">
            <el-form :model="role" ref="roleInfo">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="角色名称" label-width="120px">
                            <el-input v-model="role.roleName" placeholder="请输入角色名称" prop="roleName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="角色编号" label-width="120px">
                            <el-input v-model="role.roleKey" placeholder="请输入角色编号" prop="roleKey" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="角色状态" label-width="120px">
                            <el-radio-group v-model="role.status">
                                <el-radio label="0">正常</el-radio>
                                <el-radio label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="角色权限" label-width="120px">
                            <el-tree :data="menuList" show-checkbox node-key="id" :default-checked-keys="role.menuIds"
                                :check-strictly="true" :default-expanded-keys="role.menuIds" ref="tree">
                            </el-tree>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelFrom()">取 消</el-button>
                <el-button type="primary" @click="submitFrom()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="center" background>
            </el-pagination>
        </div>
    </div>
</template>


<script>
import roleApi from '@/api/role'
import menu from '@/api/menu'
export default {
    data() {
        return {
            dialogFormVisible: false, // 对话框开关
            total: 0, // 角色总数
            pageSize: 5, // 每页总数
            page: 1, // 当前页
            role: '',
            roleList: [],
            roleSearch: {},
            menuList: [],
            oldMenuIds: [], // 老菜单组
            newMenuIds: [] //新菜单组
        }
    },
    mounted() {
        this.getRoleList(0, this.pageSize)
        this.getMenuTree(null)
    },
    methods: {
        // 清空搜索框
        resetSearch() {
            this.roleSearch = {}
        },
        // 搜索角色
        getRoleListSearch() {
            this.getRoleList(this.page, this.pageSize, this.roleSearch)
        },
        // 取消提交
        cancelFrom() {
            this.role = {}
            this.dialogFormVisible = false
        },
        // 提交修改
        submitFrom() {
            // 获取已经当前选中的菜单组
            let newMenuIds = this.$refs.tree.getCheckedKeys();

            // 获取新增的菜单数组
            let addMenuIds = newMenuIds.filter(item => !this.oldMenuIds.includes(parseInt(item)));

            // 获取减少的菜单数组
            let decreaseMenuIds = this.oldMenuIds.filter(item => !newMenuIds.includes(String(item)));

            // 与原数组相比，新增的元素
            this.role.addMenuIds = addMenuIds
            // 与原数组相比，减少的元素
            this.role.decreaseMenuIds = decreaseMenuIds
            this.$refs["roleInfo"].validate(valid => {
                if (valid) {
                    roleApi.updateRole(this.role).then(response => {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.getRoleList(this.page, this.pageSize);
                        this.dialogFormVisible = false;
                    })
                }
            })
        },
        // 获取当前页有几条数据
        handleSizeChange(val) {
            this.pageSize = val
            this.getRoleList(this.page, this.pageSize);
        },
        // 获取当前页
        handleCurrentChange(val) {
            this.page = val
            this.getRoleList(this.page, this.pageSize);
        },
        // 获取角色信息列表
        getRoleList(page, pageSize, roleSearch) {
            roleApi.getRoleList(page, pageSize, roleSearch).then(
                res => {
                    this.roleList = res.data.rows
                    this.total = res.data.total
                }
            )

        },
        // 修改角色信息
        handleUpdate(roleObj) {
            this.dialogFormVisible = true
            this.role = roleObj
            roleApi.getRoleBingMenuIdById(roleObj.id).then(
                res => {
                    this.role.menuIds = res.data
                    this.oldMenuIds = res.data
                }
            )
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([]);
            });
        },
        // 删除角色信息
        handleDelete(id) {
            roleApi.deleteRoleById(id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            })
            this.getRoleList(this.page, this.pageSize);
        },
        // 获取菜单树结构
        getMenuTree() {
            menu.getMenuSelectVoAll().then(res => {
                this.menuList = res.data
            })
        }
    }
}
</script>

<style scoped>
.block {
    margin-top: 10px;
}

::v-deep .el-tree {
    border: 1px solid gainsboro;
    border-radius: 3px;
}
</style>